
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="game"></div>
    <p>
    Example showcasing partial canvas redrawing.
    Area inside red debug rectangles is redrawn.
    Toggle flag in code for alternate entity distribution.
    Pan the viewport by dragging it with mouse.
    Zoom the viewport by scrolling mouse wheel.
    </p>
    <script src="https://cdn.rawgit.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
    var i, l;

    Crafty.init(800, 600);
    Crafty.timer.steptype('variable', 10000);
    Crafty.background("darkgray");

    Crafty.s("DefaultCanvasLayer").debugDirty = true;

    Crafty.e('Background, 2D, Canvas, Color')
      .attr({x:-300, y:-200, w:600, h:400, z:1})
      .color('gray');

    /*
    Crafty.e('FPS, 2D, Canvas, Text')
      .attr({ x: 50, y: 50, w: 100, h: 100, z: 50 })
      .text(function (renderTime) { return "Render time: " + renderTime + "ms"; })
      .dynamicTextGeneration(true, "MeasureRenderTime");
    */

    Crafty.e('Floor, 2D, Canvas, Color')
      .attr({x: -400, y: 290, w: 800, h: 10, z: 5})
      .color('orange');

    var e;
    var entities = [];
    // TOGGLE THIS FLAG FOR ALTERNATE ENTITY DISTRIBUTION
    if (false) {
      for (i = 0; i < 12; ++i) {
        e = Crafty.e('JumpBox, 2D, Canvas, Color, Twoway, Gravity')
          .attr({x: -384 + (i+1) * 64 - 2, y: -300, w: 4, h: 4, z: 6})
          .color('blue')
          .twoway(200, 700)
          .gravity('Floor')
          .preventGroundTunneling();
        entities.push(e);
      }
    } else {
      for (i = 0; i < 265; ++i) {
        var e = Crafty.e('JumpBox, 2D, Canvas, Color, Twoway, Gravity')
          .attr({x: -400 + i*3, y: -300, w: 5, h: 60, z: 6})
          .color('blue')
          .twoway(200, 700)
          .gravity('Floor')
          .preventGroundTunneling();
        entities.push(e);
      }
    }
    Crafty.bind('EnterFrame', function() {
      for (i = 0, l = entities.length; i < l; i += 2) {
        entities[i].jump();
      }
    });

    Crafty.e('DragBox, 2D, Canvas, Color, Draggable')
      //.requires('VisibleMBR')
      .attr({x:0, y:0, w:33, h:33, z:10})
      .color('white');


    Crafty.viewport.clampToEntities = false;
    Crafty.viewport.mouselook(true);
    Crafty.bind("MouseWheelScroll", function(evt) {
        Crafty.viewport.scale(Crafty.viewport._scale * (1 + evt.direction * 0.1));
    });

    Crafty.viewport.x += 400;
    Crafty.viewport.y += 300;
    Crafty.viewport.scale(1.51111);
    </script>
  </body>
</html>
